<template>
  <div>
    <div id="mapChart"></div>
  </div>
</template>
<script>
export default {
  props: {
    adress: {
      type: String,
      require: true
    }
  },
  mounted () {
    window.addEventListener('touchmove', this.initChart(), { passive: false })
    // this.initChart();
  },
  methods: {
    initChart () {
      // window.addEventListener('touchmove',  { passive: false })
      let adress = this.adress
      var map = new BMap.Map("mapChart");
      // console.log(map);
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      map.setMapStyle({
        style: "light",
      });
      var localSearch = new BMap.LocalSearch(map);
      localSearch.setSearchCompleteCallback(function (searchResult) {
        var poi = searchResult.getPoi(0);
        adress = poi.point.lng + "," + poi.point.lat;
        map.centerAndZoom(poi.point, 13);
        var marker = new BMap.Marker(
          new BMap.Point(poi.point.lng, poi.point.lat)
        ); // 创建标注，为要查询的地址对应的经纬度
        map.addOverlay(marker);
      });
      map.centerAndZoom(adress, 12); // 初始化地图,设置中心点坐标和地图级别
      localSearch.search(adress);
    },
  },
};
</script>
<style lang="scss" scoped>
#mapChart {
  width: 100%;
  height: 100%;
  // display: none;
  touch-action: none;
}
</style> 